<template>
  <Layout :style="{minHeight: '100vh'}">
    <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)', textarea: 'right'}" class="subHeader">111</Header>
    <Content>
      <Row gutter="20" type="flex" justify="space-around">
        <Scroll :on-reach-bottom="handleReachBottom" :height="'100%'" :distance-to-edge="[10, 10]" :loading-text="加载中">
          <Col span="6" v-for="(item, index) in list1" :key="index">
            <Card :bordered="true" :dis-hover="true">
              <div style="text-align:center">
                Content {{ item }}
              </div>
            </Card>
          </Col>
        </Scroll>
      </Row>
    </Content>
  </Layout>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      list1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,1, 2, 3, 4, 5, 6, 7, 8, 9, 10,1, 2, 3, 4, 5, 6, 7, 8, 9, 10,1, 2, 3, 4, 5, 6, 7, 8, 9, 10,1, 2, 3, 4, 5, 6, 7, 8, 9, 10,1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  },methods: {
      handleReachBottom () {
            return new Promise(resolve => {
                setTimeout(() => {
                    const last = this.list1[this.list1.length - 1];
                    for (let i = 1; i < 11; i++) {
                        this.list1.push(last + i);
                    }
                    resolve();
                }, 1000);
            });
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
